<template>
  <div class="news-page">
    <!-- 内容区域 -->
    <div class="page-content">
      <!-- 搜索栏 -->
      <div class="search-bar">
        <van-search
          v-model="searchKeyword"
          placeholder="搜索招生信息..."
          @search="handleSearch"
          @clear="handleClear"
        />
      </div>
      
      <!-- 分类标签 -->
      <div class="category-tabs">
        <van-tabs v-model:active="activeCategory" @change="handleCategoryChange">
          <van-tab 
            v-for="category in categories" 
            :key="category.value"
            :title="category.label"
            :name="category.value"
          />
        </van-tabs>
      </div>
      
      <!-- 新闻列表 -->
      <div class="news-list">
        <div 
          v-for="news in newsList" 
          :key="news.id"
          class="news-item card"
          @click="goToDetail(news.id)"
        >
          <!-- 推荐标签 -->
          <div class="news-header" v-if="news.isRecommend">
            <van-tag type="danger" size="mini">推荐</van-tag>
          </div>
          
          <!-- 内容 -->
          <div class="news-content">
            <div class="title">{{ news.title }}</div>
            <div class="summary" v-if="news.summary">{{ news.summary }}</div>
            
            <!-- 图片 -->
            <div class="news-image" v-if="news.images && news.images.length">
              <img :src="news.images[0]" alt="新闻图片" />
            </div>
          </div>
          
          <!-- 底部信息 -->
          <div class="news-footer">
            <div class="meta-info">
              <span class="category">{{ getCategoryLabel(news.category) }}</span>
              <span class="time">{{ formatTime(news.createTime) }}</span>
            </div>
            <div class="stats">
              <span class="stat-item">
                <van-icon name="eye-o" size="12" />
                {{ news.viewCount }}
              </span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 加载更多 -->
      <div class="load-more" v-if="hasMore">
        <van-button 
          :loading="loading" 
          @click="loadMore"
          type="default"
          size="small"
        >
          {{ loading ? '加载中...' : '加载更多' }}
        </van-button>
      </div>
      
      <!-- 空状态 -->
      <van-empty 
        v-if="!loading && newsList.length === 0"
        description="暂无招生信息"
        image="search"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import { newsApi } from '@/api'
import type { NewsPost } from '@/types'
import { formatTime } from '@/utils/time'
import { useAppStore } from '@/stores/app'

const router = useRouter()
const appStore = useAppStore()

// 设置页面标题
appStore.setTitle('招生指南')

// 响应式数据
const searchKeyword = ref('')
const activeCategory = ref('all')
const newsList = ref<NewsPost[]>([])
const loading = ref(false)
const hasMore = ref(true)
const currentPage = ref(1)
const pageSize = 10

// 分类配置
const categories = ref([
  { label: '全部', value: 'all' },
  { label: '招生政策', value: 'policy' },
  { label: '专业介绍', value: 'major' },
  { label: '校园生活', value: 'campus' },
  { label: '就业指导', value: 'career' }
])

// 加载列表数据
const loadList = async (isRefresh = false) => {
  if (loading.value) return
  
  loading.value = true
  
  try {
    const params = {
      page: isRefresh ? 1 : currentPage.value,
      size: pageSize,
      keyword: searchKeyword.value,
      category: activeCategory.value === 'all' ? '' : activeCategory.value
    }
    
    const response = await newsApi.getList(params)
    const { list, total } = response.data
    
    if (isRefresh) {
      newsList.value = list
      currentPage.value = 1
    } else {
      newsList.value.push(...list)
    }
    
    hasMore.value = newsList.value.length < total
    currentPage.value++
  } catch (error) {
    showToast('加载失败')
    console.error('加载新闻列表失败:', error)
  } finally {
    loading.value = false
  }
}

// 搜索
const handleSearch = () => {
  currentPage.value = 1
  loadList(true)
}

// 清除搜索
const handleClear = () => {
  searchKeyword.value = ''
  currentPage.value = 1
  loadList(true)
}

// 分类切换
const handleCategoryChange = () => {
  currentPage.value = 1
  loadList(true)
}

// 加载更多
const loadMore = () => {
  loadList()
}

// 跳转到详情页面
const goToDetail = (id: string) => {
  router.push(`/news/${id}`)
}

// 获取分类标签
const getCategoryLabel = (category: string) => {
  const cat = categories.value.find(c => c.value === category)
  return cat ? cat.label : category
}

// 页面加载时获取数据
onMounted(() => {
  loadList(true)
})
</script>

<style scoped>
.news-page {
  min-height: 100vh;
  background-color: #f1f1f1;
  padding-bottom: 60px;
}

.page-content {
  padding: 0 16px 16px;
}

.search-bar {
  background: white;
  border-radius: 8px;
  margin: 16px 0;
  overflow: hidden;
}

.category-tabs {
  background: white;
  border-radius: 8px;
  margin-bottom: 16px;
  overflow: hidden;
}

.news-list {
  margin-bottom: 16px;
}

.news-item {
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.news-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.news-header {
  margin-bottom: 8px;
}

.news-content {
  margin-bottom: 12px;
}

.title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.summary {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-image {
  width: 100%;
  height: 120px;
  border-radius: 6px;
  overflow: hidden;
}

.news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid #f0f0f0;
}

.meta-info {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #999;
}

.category {
  color: #636DEA;
  font-weight: 500;
}

.stats {
  display: flex;
  gap: 16px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #999;
}

.load-more {
  text-align: center;
  padding: 16px 0;
}
</style>